<script lang="ts" setup>
import to from 'await-to-js'
import type { FormInstance } from 'element-plus'
import type { UserInfo, HandleType } from './data'
import OneUpload from '@/component/public/upload/OneUpload.vue'
import { defaultOperationList } from '@/utils/data/ability'
import Details from './details.vue'
const erArr = [
  {
    Request_No: '100100007',
    code: 'A00100200007',
    abilityId: '39d0899ff09243e39b4f3f8ab4ba91f7',
    name: 'PCC策略管理',
    tag: 'API_2.25_java',
    type: '行业能力',
    method: 'API',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供PCC策略管理、机卡绑定和区域限制等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '义诚',
    contactPhone: '13715150077',
    mailbox: 'gaiyuhong@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/9 21:10:10',
    pullCount: '1'
  },
  {
    Request_No: '100100008',
    code: 'A00100200008',
    abilityId: 'd9a326e47a86454f99a662e4b3b6cf18',
    name: '物联卡定位',
    tag: 'API_2.26_java',
    type: '行业能力',
    method: 'SDK',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '待测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供基站定位经纬度、区号定位区域编码等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '麟超',
    contactPhone: '18351078990',
    mailbox: '42830@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/10 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100009',
    code: 'A00100200009',
    abilityId: '934dbb1c56fe4e2a9e24a7c26e47dfb7',
    name: 'OneNET-Core',
    tag: 'API_2.27_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供协议接入、设备安全、命令下发、物模型、系统存储等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '智志',
    contactPhone: '13467719111',
    mailbox: '42656@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/11 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100010',
    code: 'A00100200010',
    abilityId: '17b384cdb8554413bcf0fe8d701f08c4',
    name: '专网运营',
    tag: 'API_2.28_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供专网业务的开通、查询、变更、运营分析等能力',
    banner: '',
    belong: '重庆',
    provider: '中移物联网公司',
    contact: '振梁',
    contactPhone: '15997693333',
    mailbox: '42434@hdu.edu.cn',
    uploadUser: '重庆公司',
    uploadTime: '2024/1/12 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100011',
    code: 'A00100200011',
    abilityId: 'b39a1266bf4e492ca7178e6bd997e2ab',
    name: '车辆通行能力',
    tag: 'API_2.29_java',
    type: '行业能力',
    method: 'H5',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '',
    Testpassed: '已测试',
    TestReject: '',
    describe: '提供全链路的网络拓扑展示，网络拨测，异常结果告警等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '叶静宜',
    contactPhone: '13849038741',
    mailbox: '2908055220@qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/13 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100013',
    code: 'A00100200013',
    abilityId: 'ca9b83397f1745aab0509aa3bd2ed359',
    name: '人员通行',
    tag: 'API_2.31_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '待评审',
    Reviewpassed: '',
    Reviewrejection: '',
    betestedStatus: '待测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供门禁管理、访客管理、考勤管理、假勤管理等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '邓仪绍',
    contactPhone: '13880888292',
    mailbox: '120197351@ qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/15 21:10:10',
    pullCount: '0'
  },
  {
    Request_No: '100100014',
    code: 'A00100200014',
    abilityId: '7cd4a09632d3420ca3b9cb1d707850f4',
    name: '车辆通行',
    tag: 'API_2.32_java',
    type: '行业能力',
    method: '私有化部署',
    onStatus: '待上架',
    Listed: '',
    Delisted: '',
    bereviewedStatus: '已评审',
    Reviewrejection: '',
    betestedStatus: '待测试',
    Testpassed: '',
    TestReject: '',
    describe: '提供车辆管理、出入管理、缴费管理、运营分析等能力',
    banner: '',
    belong: '河北',
    provider: '中国移动通信集团河北有限公司',
    contact: '林兰瑄',
    contactPhone: '13632577333',
    mailbox: '120197352@ qq.com',
    uploadUser: '河北公司',
    uploadTime: '2024/1/16 21:10:10',
    pullCount: '0'
  }
]
defineOptions({
  name: 'UserDetail'
})
const emit = defineEmits(['close'])
const props = defineProps<{
  currentRow: UserInfo | undefined
  type: HandleType
}>()
const currentRow = ref<any>()
const isDialogs = ref(false)
const handleShow = (row?: UserInfo) => {
  currentRow.value = row
  isDialogs.value = true
}
const title = '添加能力'
const tableData = ref(erArr)
const isLoading = ref(false)
const ruleFormRef = ref<FormInstance>()
const multipleSelection = ref<any[]>([])
const dialogVisible = ref<boolean>(true)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(7)

const data = reactive({
  ruleForm: {
    approve: true
  },
  rules: {
    userId: [{ required: true, message: '请填写' }],
    roleIds: [{ required: true, message: '请选择' }]
  }
})
const { ruleForm, rules } = toRefs<any>(data)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const handleSubmit = async () => {
  if (multipleSelection.value.length) {
    ElMessage.success('操作成功')
  }
  emit('close', multipleSelection.value)
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

onMounted(() => {
  if (props.currentRow) {
    const data = JSON.parse(JSON.stringify(props.currentRow))
    // ruleForm.value = data
  }
})
</script>

<template>
  <el-dialog v-model="dialogVisible" top="40px" :title="title" width="1000px" class="one-dialog" draggable @close="emit('close')">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      :disabled="type === 'detail'"
      class="mr-10 one-edit-form">
      <!-- <el-divider content-position="left">能力列表</el-divider> -->
      <div class="">
        <el-table ref="tableRef" :data="tableData" border row-key="id" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="code" label="能力编码 " align="center" show-overflow-tooltip />
          <el-table-column prop="name" label="能力名称" align="center" show-overflow-tooltip />
          <el-table-column prop="method" label="交付方式" align="center" show-overflow-tooltip />
          <el-table-column prop="provider" label="提供单位" align="center" show-overflow-tooltip />
          <el-table-column prop="tag" label="能力版本号" align="center" show-overflow-tooltip />
          <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
            <template #default="{ row }">
              <a :style="{ color: '#409eff' }" :href="'http://10.12.6.88/demo/ability/' + row.abilityId" target="_blank">详情</a>
              <!-- <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">查看详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
      <!-- <el-row :gutter="10">
        <el-col :lg="24" :span="24">
          <el-form-item label="下架原因:" prop="email">
            <el-input v-model="ruleForm.email" type="textarea" placeholder="下架原因" class="w-full" />
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit()" :loading="isLoading">确定</el-button>
      </span>
    </template>
    <Details v-if="isDialogs" :currentRow="currentRow" :type="type" @close="isDialogs = false" />
  </el-dialog>
</template>
<style lang="scss" scoped>
.pagination-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
